<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>YUI Library - Grids - Examples</title>
<link rel="stylesheet" type="text/css" href="../../build/reset-fonts-grids/reset-fonts-grids.css"> 
<link rel="stylesheet" type="text/css" href="../../docs/assets/examples.css">
<style>
#hd,#bd {margin-bottom:1em;}
p {margin-bottom:1em;}
ul,ol {margin:0 40px;}
ol, ol li {list-style-type:decimal;}
h2 {font-size:122%;font-weight:bold;margin-bottom:10px;}
ul {margin-bottom:10px;}
p em {font-style:italic;}
#yui-main ul li a {font-family:monospace;}
</style>
</head>

<body>

<div id="doc3" class="yui-t7">
	<div id="hd">
		<img src="../../docs/assets/logo.gif" alt="Yahoo!">
		<h1>YUI Library - Grids - Examples</h1>
	</div>
	<div id="bd">
		<div id="yui-main">
			<div class="yui-b">
			
				<h2>Page Widths</h2>
				
				<p>Choose the overall page width.</p>
				
				<ul>
					<li><a href="example_doc.html">#doc</a> - 750px centered (good for 800x600)</li>
					<li><a href="example_doc2.html">#doc2</a> - 950px centered (good for 1024x768)</li>
					<li><a href="example_doc3.html">#doc3</a> - 100% fluid (good for everybody)</li>
					<li><a href="example_doc-custom.html">#doc-custom</a> - an example of a custom page width</li>
				</ul>

				<h2>Templates</h2>

				<p>Optionally choose the secondary column's width and orientation with one of seven <em>templates</em>.</p>
				
				<ul>
					<li><a href="example_t1.html">.yui-t1</a> - Two columns, narrow on left, 160px</li>
					<li><a href="example_t2.html">.yui-t2</a> - Two columns, narrow on left, 180px</li>
					<li><a href="example_t3.html">.yui-t3</a> - Two columns, narrow on left, 300px</li>
					<li><a href="example_t4.html">.yui-t4</a> - Two columns, narrow on right, 180px</li>
					<li><a href="example_t5.html">.yui-t5</a> - Two columns, narrow on right, 240px</li>
					<li><a href="example_t6.html">.yui-t6</a> - Two columns, narrow on right, 300px</li>
					<li><a href="example_t7.html">.yui-t7</a> - One full-width column</li>
				</ul>				

				<h2>Nesting Grids</h2>
				
				<p>Optionally nest <em>standard</em> grids (<code>.yui-g</code>) and <em>special</em> grids (<code>.yui-b</code>, ... <code>.yui-f</code>) to subdivide.</p>
								
				<ul>
					<li><a href="example_g.html">.yui-g</a> - Standard <em>half</em> grid (and <a href="example_g2.html">nest again for quarters</a>).</li>
					<li><a href="example_gb.html">.yui-gb</a> - Special grid, 1/3 - 1/3 - 1/3</li>
					<li><a href="example_gc.html">.yui-gc</a> - Special grid, 2/3 - 1/3</li>
					<li><a href="example_gd.html">.yui-gd</a> - Special grid, 1/3 - 2/3</li>
					<li><a href="example_ge.html">.yui-ge</a> - Special grid, 3/4 - 1/4</li>
					<li><a href="example_gf.html">.yui-gf</a> - Special grid, 1/4 - 3/4</li>
				</ul>
				
			</div>
		</div>
	</div>
	<div id="ft"></div>
</div>


</body>
</html>
